<template>
  <view :class="['outer', currentTheme]">
    <view class="main">
      <view class="job-information">
        <view class="header">
          <view class="title">职位基本信息</view>
        </view>
        <view class="content">
          <view class="field job-type">
            <span>招聘类型</span>
            <view class="job-type-buttons">
              <button :class="{ 'active': jobType === 'full-time' }" @click="setJobType('full-time')">社招全职</button>
              <button :class="{ 'active': jobType === 'campus-recruitment' }"
                @click="setJobType('campus-recruitment')">应届校园招聘</button>
              <button :class="{ 'active': jobType === 'internship' }" @click="setJobType('internship')">实习生招聘</button>
              <button :class="{ 'active': jobType === 'part-time' }" @click="setJobType('part-time')">兼职招聘</button>
            </view>
          </view>
          <view class="field positionName">
            <span>职位名称</span>
            <view class="positionName-text">
              <input v-model="positionName" placeholder="输入职位名称" @input="handleSearch" @focus="handleSearch"
                @blur="handleBlur" class="position-search-input" />
              <view v-if="showSuggestions" class="suggestion-list">
                <view v-for="(job, index) in filteredJobs" :key="index" class="suggestion-item"
                  @click="selectJobName(job)">
                  {{ job }}
                </view>
              </view>
            </view>
          </view>
          <view class="field job-description">
            <span>职位描述</span>
            <textarea class="job-description-text" id="content" v-model="content"
              placeholder="请勿填写QQ、微信、电话等联系方式及特殊符号、性别歧视词、违反劳动法相关内容，否则有可能会导致您的账号被封禁。"></textarea>
          </view>
          <view class="field industryType">
            <span>职位类型</span>
            <view class="industryType-text">
              <picker mode="selector" :range="industryTypeOptions.map(item => item.text)"
                @change="handleIndustryTypeChange">
                <view class="picker-view">{{ industryType || '选择职位类型' }}</view>
              </picker>
            </view>
          </view>
        </view>
      </view>
      <view class="job-request">
        <view class="header">
          <view class="title">职位要求</view>
          <view class="exegesis">我们将通过以下条件，为您精选推荐合适的牛人，请尽量填写</view>
        </view>
        <view class="content">
          <view class="field experience-education">
            <span>经验和学历</span>
            <view class="experience-education-select" style="display: flex;">
              <picker mode="selector" :range="experienceOptions.map(item => item.text)" @change="handleExperienceChange"
                style="flex: 1; margin-right: 20px;">
                <view class="picker-view">{{ experience || '选择工作经验' }}</view>
              </picker>
              <picker mode="selector" :range="educationOptions.map(item => item.text)" @change="handleEducationChange"
                style="flex: 1;">
                <view class="picker-view">{{ education || '选择学历' }}</view>
              </picker>
            </view>
          </view>
          <view class="field salary">
            <span>薪资范围</span>
            <view class="experience-education-select">
              <picker v-model="minSalaryIndex" :range="minSalaryOptions.map(item => item.text)" mode="selector"
                @change="handleMinSalaryChange">
                <view class="picker-view">{{ minSalary || '最低薪资' }}</view>
              </picker>
              <view style="color: #333; margin: 0 10px; line-height: 36px;">至</view>
              <picker v-model="maxSalaryIndex" :range="maxSalaryOptions.map(item => item.text)" mode="selector"
                @change="handleMaxSalaryChange">
                <view class="picker-view">{{ maxSalary || '最高薪资' }}</view>
              </picker>
            </view>
          </view>
          <view class="field positionTagsList">
            <span>职位标签</span>
            <view class="positionTagsList-select">
              <view class="container" v-if="positionTagsList && positionTagsList.length > 0">
                <!-- 将u-tag组件替换为标准的view组件 -->
                <view v-for="(tag, index) in positionTagsList" :key="index" class="custom-tag">
                  {{ tag }}
                  <text class="tag-close" @click.stop="removeTag(index)">×</text>
                </view>
              </view>
              <view class="tag-input-container">
                <input v-model="tagSearchText" placeholder="输入或选择职位标签" @input="handleTagSearch" @focus="handleTagFocus"
                  @blur="handleTagBlur" class="tag-input" />
                <view v-if="showTagSuggestions && filteredTagOptions.length > 0" class="tag-suggestion-list">
                  <view v-for="(tag, index) in filteredTagOptions" :key="index" class="tag-suggestion-item"
                    @click="selectTag(tag)">
                    {{ tag }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="time">
        <view>更新时间：{{ updateTime }}</view>
      </view>
      <view class="submit">
        <button @click="clearFormAndGoBack">返回</button>
        <button @click="submitJobPostings">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { addjobPostings, getJobTags } from "@/api/job.js";
import { mapState, mapActions } from "vuex";

export default {
  components: {
  },
  data() {
    return {
      // 主题相关
      currentTheme: 'theme1', // 当前主题，默认为主题1
      
      // 职位基本信息
      jobType: "full-time", // 招聘类型，默认为全职
      positionName: "", // 职位名称
      content: "", // 职位描述
      industryType: "", // 职位类型
      showSuggestions: false, // 修复拼写错误
      filteredJobs: [], // 过滤后的职位列表

      // 职位要求
      experience: "", // 经验要求
      education: "", // 学历要求
      minSalary: "", // 最低薪资
      maxSalary: "", // 最高薪资
      positionTagsList: [], // 添加一些默认标签以便测试
      jobTagsOptions: [], // 职位标签选项
      tagSearchText: "", // 标签搜索文本
      showTagSuggestions: false, // 显示标签建议
      filteredTagOptions: [], // 过滤后的标签选项
      updateTime: new Date().toLocaleString(), // 更新时间

      // 下拉选项数据
      experienceOptions: [
        { value: "不限", text: "不限" },
        { value: "1年以内", text: "1年以内" },
        { value: "1-3年", text: "1-3年" },
        { value: "3-5年", text: "3-5年" },
        { value: "5-10年", text: "5-10年" },
        { value: "10年以上", text: "10年以上" }
      ],
      educationOptions: [
        { value: "不限", text: "不限" },
        { value: "初中及以下", text: "初中及以下" },
        { value: "中专/中技", text: "中专/中技" },
        { value: "高中", text: "高中" },
        { value: "大专", text: "大专" },
        { value: "本科", text: "本科" },
        { value: "硕士", text: "硕士" },
        { value: "博士", text: "博士" }
      ],
      minSalaryOptions: [
        { value: "1k", text: "1k" },
        { value: "2k", text: "2k" },
        { value: "3k", text: "3k" },
        { value: "4k", text: "4k" },
        { value: "5k", text: "5k" },
        { value: "6k", text: "6k" },
        { value: "7k", text: "7k" },
        { value: "8k", text: "8k" },
        { value: "9k", text: "9k" },
        { value: "10k", text: "10k" },
        { value: "15k", text: "15k" },
        { value: "20k", text: "20k" },
      ],
      maxSalaryOptions: [], // 动态生成的最高薪资选项
      industryTypeOptions: [] // 初始化职位类型选项为空数组
    };
  },

  watch: {
    // 监听最低薪资变化，动态更新最高薪资选项
    minSalary(newMinSalary) {
      if (!newMinSalary || isNaN(parseInt(newMinSalary.replace("k", ""), 10))) {
        this.maxSalaryOptions = [];
        this.maxSalary = "";
        return;
      }
      const minSalaryValue = parseInt(newMinSalary.replace("k", ""), 10);
      // 扩大薪资范围选项，更符合实际需求
      this.maxSalaryOptions = this.minSalaryOptions.filter(option => {
        const optionValue = parseInt(option.value.replace("k", ""), 10);
        return optionValue >= minSalaryValue;
      });
      // 保留用户之前的选择，如果仍然有效
      if (this.maxSalary) {
        const currentMaxValue = parseInt(this.maxSalary.replace("k", ""), 10);
        if (currentMaxValue < minSalaryValue) {
          this.maxSalary = this.maxSalaryOptions.length > 0 ? this.maxSalaryOptions[0].value : "";
        }
      }
    },

    // 监听jobList变化，动态生成职位类型选项
    jobList: {
      handler(newJobList) {
        if (newJobList && newJobList.length > 0) {
          // 从jobList中提取职位类型并去重
          const uniqueTypes = [...new Set(newJobList)];
          // 转换为需要的格式
          this.industryTypeOptions = uniqueTypes.map(type => ({
            value: type,
            text: type
          }));
        }
      },
      immediate: true // 组件初始化时立即执行一次
    }
  },
  computed: {
    ...mapState(['jobList']) // 从store获取职位列表
  },

  onLoad() {
    // 加载保存的主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    
    this.getJobTags();
    // 获取职位名称列表用于自动补全
    this.getJobNamesList();
    // 初始化最高薪资选项，默认显示所有选项
    this.maxSalaryOptions = [...this.minSalaryOptions];
  },

  methods: {
    ...mapActions(['getJobNamesList']), // 映射action

    // 主题切换事件处理
    handleThemeChange(newTheme) {
      // 使用nextTick确保DOM更新完成后再设置主题
      this.$nextTick(() => {
        this.currentTheme = newTheme;
      });
    },

    // 修复handleSearch方法 - 使用store中的jobList进行自动补全
    handleSearch(e) {
      // 如果参数是事件对象，获取其value属性
      const value = typeof e === 'object' && e !== null ? e.detail.value : e;

      if (value && value.trim()) {
        // 确保jobList存在且不为空
        if (this.jobList && this.jobList.length > 0) {
          // 根据输入过滤职位列表，支持模糊匹配
          this.filteredJobs = this.jobList.filter(job => {
            // 处理不同的数据格式
            const jobName = typeof job === 'string' ? job : (job.name || job.jobName || job.positionName || '');
            return jobName.toLowerCase().includes(value.toLowerCase());
          }).slice(0, 10); // 限制显示最多10个建议

          this.showSuggestions = this.filteredJobs.length > 0;
        } else {
          // 如果jobList为空，尝试重新获取
          this.getJobNamesList();
          this.filteredJobs = [];
          this.showSuggestions = false;
        }
      } else {
        this.filteredJobs = [];
        this.showSuggestions = false;
      }
    },

    // 选择建议的职位名称
    selectJobName(jobName) {
      // 处理不同的数据格式
      const selectedName = typeof jobName === 'string' ? jobName : (jobName.name || jobName.jobName || jobName.positionName || '');
      this.positionName = selectedName;
      this.showSuggestions = false;
      this.filteredJobs = [];
    },

    // 处理搜索框失去焦点
    handleBlur() {
      // 延迟隐藏，以便用户可以点击建议项
      setTimeout(() => {
        this.showSuggestions = false;
      }, 200);
    },

    // 处理职位类型选择
    handleIndustryTypeChange(e) {
      const index = e.detail.value;
      if (this.industryTypeOptions[index]) {
        this.industryType = this.industryTypeOptions[index].value;
      }
    },

    // 设置招聘类型
    setJobType(type) {
      this.jobType = type;
    },

    // 处理工作经验选择
    handleExperienceChange(e) {
      const index = e.detail.value;
      if (this.experienceOptions[index]) {
        this.experience = this.experienceOptions[index].value;
      }
    },

    // 处理学历选择
    handleEducationChange(e) {
      const index = e.detail.value;
      if (this.educationOptions[index]) {
        this.education = this.educationOptions[index].value;
      }
    },

    // 处理最低薪资选择
    handleMinSalaryChange(e) {
      const index = e.detail.value;
      if (this.minSalaryOptions[index]) {
        this.minSalary = this.minSalaryOptions[index].value;
      }
    },

    // 处理最高薪资选择
    handleMaxSalaryChange(e) {
      const index = e.detail.value;
      if (this.maxSalaryOptions[index]) {
        this.maxSalary = this.maxSalaryOptions[index].value;
      }
    },

    // 处理标签搜索
    handleTagSearch() {
      if (this.tagSearchText.trim() === '') {
        this.filteredTagOptions = [...this.jobTagsOptions];
      } else {
        this.filteredTagOptions = this.jobTagsOptions.filter(tag =>
          tag.toLowerCase().includes(this.tagSearchText.toLowerCase())
        );
      }
      this.showTagSuggestions = this.filteredTagOptions.length > 0;
    },

    // 处理标签输入框获得焦点
    handleTagFocus() {
      this.filteredTagOptions = [...this.jobTagsOptions];
      this.showTagSuggestions = this.filteredTagOptions.length > 0;
    },

    // 处理标签输入框失去焦点
    handleTagBlur() {
      // 延迟隐藏建议列表，以便点击事件能够触发
      setTimeout(() => {
        this.showTagSuggestions = false;
      }, 200);
    },

    // 选择标签
    selectTag(tag) {
      if (!this.positionTagsList.includes(tag)) {
        this.positionTagsList.push(tag);
      }
      this.tagSearchText = '';
      this.showTagSuggestions = false;
    },

    // 处理标签选择（保留原方法以兼容）
    handleTagChange(e) {
      if (e && e.length > 0) {
        // 添加新选择的标签，避免重复
        e.forEach(tag => {
          const tagName = typeof tag === 'string' ? tag : (tag.label || tag.name || tag);
          if (!this.positionTagsList.includes(tagName)) {
            this.positionTagsList.push(tagName);
          }
        });
      }
    },

    // 移除标签
    removeTag(index) {
      this.positionTagsList.splice(index, 1);
    },

    // 获取职位标签
    async getJobTags() {
      try {
        const response = await getJobTags();
        if (response && response.data) {
          // 将标签数据转换为字符串数组，便于搜索和显示
          this.jobTagsOptions = response.data.map(tag => tag.name || tag);
          this.filteredTagOptions = [...this.jobTagsOptions]; // 初始化过滤选项
        }
      } catch (error) {
        console.error('获取职位标签失败:', error);
        // 提供默认标签
        this.jobTagsOptions = [
          '五险一金', '弹性工作', '年终奖', '带薪年假',
          '团队氛围好', '发展空间大', '双休', '加班补助',
          '餐补', '交通补助', '培训机会', '晋升空间'
        ];
        this.filteredTagOptions = [...this.jobTagsOptions];
      }
    },

    // 清空表单并返回
    clearFormAndGoBack() {
      // 重置所有表单数据
      this.jobType = "full-time";
      this.positionName = "";
      this.content = "";
      this.industryType = "";
      this.experience = "";
      this.education = "";
      this.minSalary = "";
      this.maxSalary = "";
      this.positionTagsList = [];

      // 返回上一页
      uni.navigateBack();
    },

    // 提交职位信息
    async submitJobPostings() {
      // 表单验证
      if (!this.positionName.trim()) {
        uni.showToast({
          title: '请输入职位名称',
          icon: 'none'
        });
        return;
      }

      if (!this.content.trim()) {
        uni.showToast({
          title: '请输入职位描述',
          icon: 'none'
        });
        return;
      }

      if (!this.industryType) {
        uni.showToast({
          title: '请选择职位类型',
          icon: 'none'
        });
        return;
      }

      // 构建提交数据
      const jobData = {
        jobType: this.jobType,
        positionName: this.positionName.trim(),
        content: this.content.trim(),
        industryType: this.industryType,
        experience: this.experience,
        education: this.education,
        minSalary: this.minSalary,
        maxSalary: this.maxSalary,
        positionTagsList: this.positionTagsList,
        updateTime: new Date().toISOString()
      };

      try {
        uni.showLoading({
          title: '提交中...'
        });

        const response = await addjobPostings(jobData);

        uni.hideLoading();

        if (response && response.code === 200) {
          uni.showToast({
            title: '职位发布成功',
            icon: 'success'
          });

          // 延迟返回，让用户看到成功提示
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: response.message || '发布失败，请重试',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('提交职位信息失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
/* 强制禁用所有动画和过渡效果 */
.outer * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

.outer {
  transition: none !important;
  animation: none !important;
}

/* 主题1样式 */
.outer.theme1 {
  background-color: #fffefb; /* 大背景 */
  padding: 15px;
  min-height: 100vh;
}

.outer.theme1 .main {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: auto;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  background: #f5f4f1; /* 次背景 */
  backdrop-filter: blur(9px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
}

.outer.theme1 .positionName-text,
.outer.theme1 .industryType-text,
.outer.theme1 .job-description-text {
  background: #d4eaf7; /* 第三色 */
  margin-top: 10px;
}

.outer.theme1 .field input,
.outer.theme1 .field textarea,
.outer.theme1 .picker-view,
.outer.theme1 .tag-input {
  background-color: #d4eaf7; /* 第三色 */
  border: 1px solid #ccc;
}

.outer.theme1 .suggestion-list,
.outer.theme1 .tag-suggestion-list {
  background: #d4eaf7; /* 第三色 */
}

.outer.theme1 .custom-tag {
  background-color: #d4eaf7;
  color: #007aff;
}

/* 主题2样式 */
.outer.theme2 {
  background-color: #F5EFE8; /* 大背景 */
  padding: 15px;
  min-height: 100vh;
}

.outer.theme2 .main {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: auto;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  background: #EEE3D7; /* 次背景 */
  backdrop-filter: blur(9px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
}

.outer.theme2 .positionName-text,
.outer.theme2 .industryType-text,
.outer.theme2 .job-description-text {
  background: #BFAE9F; /* 第三色 */
  margin-top: 10px;
}

.outer.theme2 .field input,
.outer.theme2 .field textarea,
.outer.theme2 .picker-view,
.outer.theme2 .tag-input {
  background-color: #BFAE9F; /* 第三色 */
  border: 1px solid #ccc;
}

.outer.theme2 .suggestion-list,
.outer.theme2 .tag-suggestion-list {
  background: #BFAE9F; /* 第三色 */
}

.outer.theme2 .custom-tag {
  background-color: #BFAE9F;
  color: #333;
}

/* 通用样式保持不变 */
.outer {
  padding: 15px;
  min-height: 100vh;
}

.main {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: auto;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  /* background: rgba(255, 255, 255, 0.2); */
  background: #fff;
  backdrop-filter: blur(9px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
}

.header {
  display: flex;
  flex-direction: column;
}

.header .title {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}

.header .exegesis {
  font-size: 14px;
  text-align: left;
  color: #5c5c5c;
  margin-top: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
}

.positionName-text {
  margin-top: 10px;
  background: #fff;
}

.industryType-text {
  margin-top: 10px;
  background: #fff;
}

.experience-education-select {
  margin-top: 10px;
  display: flex;
}

.salary-select {
  margin-top: 10px;
  display: flex;
}

.field {
  align-items: column;
  margin-bottom: 15px;
  color: #5c5c5c;
}

.field span {
  color: #333;
  width: 80px;
  margin-right: 5px;
  white-space: nowrap;
}

.job-type-buttons {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  /* 可选：如果想让按钮垂直方向有间距，可加这个 */
  gap: 10px;
  margin-left: 0px;
  padding-left: 0;
  /* 移除可能存在的左内边距 */
  /* 可选：限制最大宽度，确保换行时对齐整齐 */
  max-width: 100%;
}

/* .companyName {
  color: #000;
} */


.field input,
.field textarea,
.field select {
  flex: 1;
  /* width: 100%; */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.field textarea {
  height: 100px;
}


.job-type button {
  margin-right: 0;
  /* 去掉原来的 margin-right，用 gap 或自己控制更灵活 */
  margin: 0;
  padding: 1px 5px;
  border: transparent;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 12px;
  /* 让按钮在换行时，根据内容自适应宽度，也可固定宽度 */
  white-space: nowrap;
  /* line-height: 1; */
}

.job-type button.active {
  background-color: #007aff;
  color: white;
}

.job-description-text {
  margin-top: 10px;
  background: #fff;
}

.job-request {
  margin-top: 20px;
}

.time {
  text-align: right;
  font-size: 12px;
  color: #333;
}

.resp-information {
  display: flex;
  justify-content: flex-end;

}

.resPerson,
.respPos {
  height: 50px;
  line-height: 50px;
  margin-right: 10px;

}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.positionTagsList-select {
  margin-top: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: visible;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;
  border-radius: 4px;
  margin-bottom: 10px;
  min-height: 40px;
  align-items: center;
}

/* 使用自定义标签样式替换u-tag组件 */
.custom-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: #e8f4fd;
  color: #007aff;
  border-radius: 16px;
  font-size: 14px;
  max-width: 100%;
  word-break: break-word;
}

.tag-close {
  margin-left: 6px;
  font-size: 16px;
  cursor: pointer;
  color: #999;
}

.tag-close:hover {
  color: #666;
}

.tag-input-container {
  position: relative;
  width: 100%;
  z-index: 100;
  /* 提高容器的z-index */
}

.tag-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  height: 50px;
  position: relative;
  z-index: 1;
}

.tag-suggestion-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 99999;
  /* 设置极高的z-index值，确保在所有元素之上 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  margin-top: 2px;
}

.tag-suggestion-item {
  padding: 8px 10px;
  /* 减少垂直padding，节省空间 */
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  /* 稍微减小字体，节省空间 */
}

.tag-suggestion-item:hover {
  background-color: #f5f5f5;
}

.tag-suggestion-item:last-child {
  border-bottom: none;
}

.positionTagsListbutton {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}

.positionTagsListbutton:hover {
  background-color: #f0f0f0;
}

.submit {
  display: flex;
  flex-direction: column;
  /* 垂直排列按钮，让每个按钮独占一行 */
  align-items: center;
  /* 水平居中 */
}

.submit button {
  border: 1px solid #ccc;
  cursor: pointer;
  width: 90%;
  height: 40px;
  margin-top: 15px;
  text-align: center;
  /* 文字水平居中 */
  line-height: 40px;
  /* 文字垂直居中（行高与按钮高度一致） */
  border-radius: 4px;
}


.industryType .el-select {
  margin-left: 12px;
}

.salary .el-select {
  margin-left: 1px;
}

.el-select-dropdown__item {
  color: #000;
}

.el-select-dropdown__item:hover {
  background-color: #ccc;
}

.el-button.active {
  background-color: #007aff;
  ;
  color: white;
}

.picker-view {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

/* 确保positionName-text容器是相对定位的，以便绝对定位的建议列表正确显示 */
.positionName-text {
  position: relative;
  width: 100%;
}

/* 添加自动补全列表样式 */
.suggestion-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
}
</style>